<template>
  <div id="send">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>{{ isset ? '修改文章' : '发布文章' }}</span>
        <el-button size="medium" class="submit" type="primary" @click="submit">提交</el-button>
      </div>
      <el-scrollbar style="height: 100%;">
        <div class="box">
          <el-form ref="form" :model="form" style="width: 100%;" label-width="80px">
            <el-row :gutter="10" style="width: 100%;">
              <el-col :span="7">
                <el-form-item label="文章分类">
                  <el-select clearable v-model="form.classid" placeholder="请选择分类">
                    <el-option v-for="item in classlist" :key="item.class_id" :label="item.classname"
                      :value="item.class_id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="17">
                <el-form-item label="标题" label-width="40px">
                  <el-input clearable v-model="form.title" placeholder="请输入文章标题"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="文章简介" label-width="80px">
                  <el-input type="textarea" clearable :rows="2" placeholder="请输入文章简介" v-model="form.intro">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <mavon-editor style="height: 100%; z-index: 0; min-height: 400px;" ref="mdedit" v-model="form.content">
          </mavon-editor>
        </div>
      </el-scrollbar>
    </el-card>
  </div>
</template>

<script>
import { getClass, addArticle, getArticleInfo, setArticle } from '@/api/index.js'
export default {
  name: 'send',
  data() {
    return {
      form: {
        classid: '',
        title: '',
        intro: '',
        content: '',
      },
      classlist: [],
      isset: false,
    }
  },
  watch: {
    $route: {
      deep: true,
      immediate: true, //是否刚进来初始化就加载
      handler(value) {
        this.isset = !(Object.keys(value.query).length === 0)
        if (!this.isset) {
          //发布
        } else {
          //编辑
          this.getArticleInfo()
        }
      },
    }
  },
  mounted() {
    this.getClass()
  },
  methods: {
    //获取分类
    getClass() {
      getClass({ type: 0 }).then((res) => {
        this.classlist = res.data.results;
      })
    },
    //提交文章
    submit() {
      if (!this.isset) {
        addArticle({ ...this.form, date: this.$moment(Date.now()) }).then((res) => {
          if (res.data.status == 1) {
            this.$message.success('成功');
            this.form = {
              classid: '',
              title: '',
              intro: '',
              content: '',
            }
          } else {
            this.$message.error('失败');
          }
        })
      } else {
        let query = { ...this.form, article_id: this.$route.query.article_id,date: this.$moment(Date.now()) }
        setArticle(query).then(res => {
          if (res.data.status == 1) {
            this.$message.success('成功');
          } else {
            this.$message.error('失败');
          }
        })
      }
    },
    //获取文章信息
    getArticleInfo() {
      getArticleInfo({ article_id: this.$route.query.article_id }).then((res) => {
        if (res.data.status) {
          this.form = res.data.results
        } else {
          this.$message.error('失败')
        }
      })
    },
  }
}
</script>

<style lang="less" src="./index.less" scoped></style>